<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Login</title>
    <link rel="stylesheet" href="./style.min.css">
  </head>
  <body>
    <form action="indx.html">
      <h1>登录</h1>
      <main>
        <section>
          <input type="text">
          <span data-placeholder="请输入用户名"></span>
        </section>
        <section>
          <input type="password">
          <span data-placeholder="请输入密码"></span>
        </section>
        <input type="submit" value="提交" id="btn提交">
      </main>
      <footer>
        还没有账号？<a href="##" >注册</a>
      </footer>
    </form>
  </body>
  <script>
    var inputs = [];
    window.onload = ()=>
    {
      let sections = Array.from(document.getElementsByTagName("section"));
      sections.forEach(section=>
      {
        temp = Array.from(section.getElementsByTagName("input"));
        inputs.push(temp[0]);
      });
      inputs.forEach(input=>
      {
        input.onfocus = function()
        {
          this.classList.add("focus");
        }
        input.onblur = function()
        {
          this.classList.remove("focus");
        }
      });
    };
  </script>
</html>
